<template>
  <div class="custom-container p-5">
    <a-select ref="select" style="width: 145px;margin-bottom: 20px;" :placeholder="'请选择卫星名称'" allowClearget_mset>
      <a-select-option :value="item.sat" v-for="item in typeoption" @click="changeck(item.sat, item.date)"
        :key="item.id">{{
        item.sat
        }}</a-select-option>
    </a-select>
    <div>
      <a-row :gutter="16">
        <a-col :span="24">
          <!-- <div class="box_tit">
                                                                                                                  当前频谱
                                                                                                                </div> -->
          <a-space style="margin-bottom: 10px;" direction="vertical">
            <a-date-picker v-model:value="value1" @change="handleDateChange">
              <template #dateRender="{ current }">
                <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                  {{ current.date() }}
                </div>
              </template>
            </a-date-picker>
          </a-space>
          <!-- 第一个频谱 -->
          <div class="box_con char1" style="width:100%;height: 400px;">
            <div ref="chartRef"
              style="width: 100%;height: 380px;background-image: linear-gradient(#535353, #060606);border: 1px solid #fff;">
            </div>
          </div>
          <!-- 第二个频谱 -->
          <a-space style="margin-bottom: 10px;" direction="vertical">
            <a-date-picker v-model:value="value2" @change="handleDateChange2">
              <template #dateRender="{ current }">
                <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                  {{ current.date() }}
                </div>
              </template>
            </a-date-picker>
          </a-space>
          <div class="box_con char1" style="width:100%;height: 400px;">
            <div ref="chartRef2"
              style="width: 100%;height: 380px;background-image: linear-gradient(#535353, #060606);border: 1px solid #fff;">
            </div>
          </div>
          <!-- 对比频谱 -->
          <div class="box_con char1" style="width:100%;height: 400px;">
            <div ref="chartRef3"
              style="width: 100%;height: 380px;background-image: linear-gradient(#535353, #060606);border: 1px solid #fff;">
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  
  </div>
</template>
  <script lang="ts">
import { useAppStore } from '/@/store/modules/app.ts';
import { Moment } from 'moment';
import { defineComponent, CSSProperties, onMounted, onBeforeUnmount, reactive, ref, Ref, watch } from 'vue';
import { set_chn_switch } from "/@/api/biz/index";
import charts from './charts.vue';
import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { defHttp } from '/@/utils/http/axios';
//import { ExclamationCircleOutlined, PoweroffOutlined, StarTwoTone } from '@ant-design/icons-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { message } from 'ant-design-vue';
import { useGo } from '/@/hooks/web/usePage';
import { useECharts } from '/@/hooks/web/useECharts';
import { get_satname, get_spec, get_satelliteDate } from '/@/api/biz/index';
import axios from 'axios'


export default defineComponent({
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    const chartRef2 = ref<HTMLDivElement | null>(null);
    const chartRef3 = ref<HTMLDivElement | null>(null);

    const { setOptions, resize, echarts, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>,
    );
    const { setOptions: setOptions2, resize: resize2 } = useECharts(chartRef2);
    const { setOptions: setOptions3, resize: resize3 } = useECharts(chartRef3);

    // 定义高亮日期数组
    const highlightedDates = ref([]);

    // 获取当前日期的样式
    const getCurrentStyle = (current: Moment) => {
    console.log(123132312313123231,'0-0=-')
      const style: CSSProperties = {};
      const currentDate = current.format("YYYY-MM-DD"); // 将当前日期格式化为 YYYY-MM-DD 格式

      // 检查当前日期是否在高亮日期数组中
      if (highlightedDates.value.includes(currentDate)) {
        style.border = '1px solid #ff4d4f'; // 设置高亮边框颜色
        style.borderRadius = '50%'; // 设置圆角
        style.backgroundColor = '#ffebee'; // 设置背景颜色
        style.color = '#ff4d4f'; // 设置文字颜色
      }

      return style;
    };

    const data = [
      // ['3630.00', 100],
      // ['3656.88', 102],
      // ['3683.76', 105],
      // ['3710.64', 109],
      // ['3737.52', 113],
      // ['3764.40', 114],
      // ['3791.28', 117],
      // ['3818.16', 119],
      // ['3845.04', 121],
      // ['3871.92', 124],
      // ['3898.80', 114],
      // ['3925.68', 112],
      // ['3952.56', 123],
      // ['3979.44', 125],
      // ['4006.32', 127],
      // ['4033.20', 129],
      // ['4060.08', 110],
      // ['4087.96', 111],
      // ['4114.84', 120],
      // ['4141.72', 125],
      // ['4168.60', 130],
    ];
    const typeoption = ref([
      { sat: '123' }
    ])

    //获取卫星名称下拉内容
    const get_satName = () => {
      get_satname({}).then((res) => {
        typeoption.value = res.data.data.result.data.data
      })
    }

    // 频谱卫星名
    let satName = ref('')
    //获取下拉框选择对应卫星名称
    function changeck(sat, date) {
      satName.value = sat
      setOptions({});
      setOptions2({});
      setOptions3({});
      // 清空两个日期选择器的内容
      value1.value = null;
      value2.value = null;
      get_satelliteDate(({ sat_name: sat })).then((res) => {
        highlightedDates.value = res.data.data.result.data.data
      })
      console.log(satName.value, '卫星1-00=')
    }
    const dateList = data.map(function (item) {
      return item[0];
    });
    const valueList = data.map(function (item) {
      return item[1];
    });
    const valueList2 = valueList.map(value => value - 10);

    const xdata2 = ref(null);
    const ydata2 = ref(null);
    const xdata = ref(null);
    const ydata = ref(null);
    // 获取今天和昨天的日期
    function getTodayAndYesterday() {
      const today = new Date();  // 获取当前日期
      const yesterday = new Date(today);  // 克隆当前日期
      yesterday.setDate(today.getDate() - 1);  // 设置为昨天

      // 格式化为 YYYYMMDD 格式
      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');  // 月份从 0 开始，所以要加 1
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}${month}${day}`;
      };

      const todayFormatted = formatDate(today);
      const yesterdayFormatted = formatDate(yesterday);

      return {
        today: todayFormatted,
        yesterday: yesterdayFormatted
      };
    }
    const appStore = useAppStore();

    //const values = ref('')
    // 定义一个响应式变量 values，用于存储卫星数据
    const values = ref('');

    // 定义一个异步函数 get_setOption3，用于获取并设置图表数据
    const get_setOption3 = async () => {
      // 定义四个响应式变量，用于存储图表的 X 和 Y 轴数据
      let xdata3 = ref(null);
      let xdata4 = ref(null);
      let ydata3 = ref(null);
      let ydata4 = ref(null);

      // 调用 getTodayAndYesterday 函数获取今天和昨天的日期
      const { today, yesterday } = getTodayAndYesterday();

      // 使用 axios 发起 GET 请求，获取卫星数据
      await axios.get(`/api/getsat?ip=${appStore.obj.ip}`).then((res) => {
        values.value = res.data.data.result.data.data.sat; // 将返回的卫星数据赋值给 values
      });

      // 使用 get_spec 函数获取昨天的特定数据
      await get_spec({ date: yesterday, sat: values.value }).then((res) => {
        // 检查返回的 X 轴数据长度是否大于 0
        if (res.data.data.result.data.data.x.length > 0) {
          xdata4.value = res.data.data.result.data.data.x; // 将返回的 X 轴数据赋值给 xdata4
          ydata4.value = res.data.data.result.data.data.y; // 将返回的 Y 轴数据赋值给 ydata4
        }
      });

      // 使用 get_spec 函数获取今天的数据
      await get_spec({ date: today, sat: values.value }).then((res) => {
        // 检查返回的 X 轴数据长度是否大于 0
        if (res.data.data.result.data.data.x.length > 0) {
          xdata3.value = res.data.data.result.data.data.x; // 将返回的 X 轴数据赋值给 xdata3
          ydata3.value = res.data.data.result.data.data.y; // 将返回的 Y 轴数据赋值给 ydata3
        }
      });

      // 检查 ydata3 和 ydata4 是否存在
      if (ydata3.value && ydata4.value) {
        // 调用 setOptions3 函数设置图表选项
        setOptions3({
          // 配置视觉映射组件
          visualMap: [
            {
              show: false, // 不显示视觉映射组件
              type: 'continuous', // 连续型视觉映射
              seriesIndex: 0, // 应用于第一个系列
              min: 0, // 最小值
              max: 400, // 最大值
            },
            {
              show: false, // 不显示视觉映射组件
              type: 'continuous', // 连续型视觉映射
              seriesIndex: 1, // 应用于第二个系列
              dimension: 0, // 映射到数据的第一个维度
              min: 0, // 最小值
              max: dateList.length - 1, // 最大值为 dateList 的长度减 1
            },
          ],
          title: [], // 图表标题，当前为空
          tooltip: {
            trigger: 'axis', // 工具提示将在坐标轴触发
          },
          dataZoom: [
            {
              startValue: '1820000', // 数据窗口范围的起始值
            },
            {
              type: 'inside', // 内部型数据区域缩放
            },
          ],
          legend: {
            data: ['系列1', '系列2'], // 图例数据
            textStyle: {
              color: '#fff', // 图例文本颜色
            },
            icon: "roundRect", // 图例图标形状
          },
          xAxis: [
            {
              data: xdata3, // X 轴数据
              axisLabel: {
                // interval:0 // 设置标签的间隔，当前被注释掉
              }
            },
          ],
          yAxis: [{}], // Y 轴配置，当前为空
          grid: {
            left: '5%', // 网格距离容器左侧的距离
            right: '2%', // 网格距离容器右侧的距离
            bottom: '20%', // 网格距离容器底部的距离
          },
          series: [
            {
              name: '系列1', // 系列名称
              type: 'line', // 系列类型为折线图
              showSymbol: false, // 不显示折线图上的节点标记
              data: ydata3, // 系列数据
              itemStyle: {
                color: 'red', // 折线节点颜色
              },
              lineStyle: {
                color: 'red', // 折线颜色
              },
            },
            {
              name: '系列2', // 系列名称
              type: 'line', // 系列类型为折线图
              showSymbol: false, // 不显示折线图上的节点标记
              data: ydata4, // 系列数据
              itemStyle: {
                color: '#7186dc', // 折线节点颜色
              },
              lineStyle: {
                color: '#7186dc', // 折线颜色
              },
            },
          ],
        });
      }
    };

    onMounted(() => {
      get_satName()
      get_setOption3()
    });

    const value1 = ref(null); // 用于绑定日期选择器的值 

    // 定义一个函数 handleDateChange，用于处理日期选择器的变化
    const handleDateChange = (date, dateString) => {
      // 将选中的日期字符串中的 '-' 替换为 ''，并更新 value1 的值
      value1.value = dateString.replace(/-/g, '');

      // 检查 satName 是否有值
      if (!satName.value) {
        // 如果 satName 为空，显示错误消息
        message.error('请先选择卫星');
      } else {
        // 如果 satName 有值，调用 get_spec 函数获取特定日期和卫星的数据
        get_spec({ date: value1.value, sat: satName.value }).then((res) => {
          // 检查返回的 X 轴数据长度是否大于 0
          if (res.data.data.result.data.data.x.length > 0) {
            // 更新 xdata 和 ydata 的值
            xdata.value = res.data.data.result.data.data.x;
            ydata.value = res.data.data.result.data.data.y;
            console.log(ydata.value, 'ydatadaewdawdawda');

            // 调用 setOptions 函数设置图表选项
            setOptions({
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    width: 1,
                    color: 'red',
                  },
                },
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xdata.value,
                axisLabel: {
                  interval: 380,
                  //rotate: 315,
                },
              },
              yAxis: [
                {
                  type: 'value',
                  max: -30,
                  min: -130,
                },
              ],
              grid: {
                left: '1%',
                right: '1%',
                top: '2%',
                bottom: 60,
                containLabel: true,
              },
              dataZoom: [
                {
                  show: true,
                  realtime: true,
                  backgroundColor: 'rgba(47,69,84,0)',
                  start: 0,
                  end: 100,
                  xAxisIndex: [0, 1],
                },
                {
                  type: 'inside',
                  realtime: true,
                  start: 0,
                  end: 100,
                  xAxisIndex: [0, 1],
                },
              ],
              series: [
                {
                  smooth: true,
                  data: ydata.value,
                  type: 'line',
                  itemStyle: {
                    color: 'red',
                  },
                },
              ],
            });

            // 检查 xdata2 是否有值
            if (xdata2.value.length > 0) {
              // 如果 xdata2 有值，调用 setOptions3 函数设置另一个图表的选项
              setOptions3({
                visualMap: [
                  {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 400,
                  },
                  {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 1,
                    dimension: 0,
                    min: 0,
                    max: dateList.length - 1,
                  },
                ],
                title: [],
                tooltip: {
                  trigger: 'axis',
                },
                dataZoom: [
                  {
                    startValue: '1820000',
                  },
                  {
                    type: 'inside',
                  },
                ],
                legend: {
                  data: ['系列1', '系列2'],
                  textStyle: {
                    color: '#fff',
                  },
                  icon: 'roundRect',
                },
                xAxis: [
                  {
                    data: xdata,
                    axisLabel: {
                      // interval:0
                    },
                  },
                ],
                yAxis: [{}],
                grid: {
                  left: '5%',
                  right: '2%',
                  bottom: '20%',
                },
                series: [
                  {
                    name: '系列1',
                    type: 'line',
                    showSymbol: false,
                    data: ydata,
                    itemStyle: {
                      color: 'red',
                    },
                    lineStyle: {
                      color: 'red',
                    },
                  },
                  {
                    name: '系列2',
                    type: 'line',
                    showSymbol: false,
                    data: ydata2,
                    itemStyle: {
                      color: '#7186dc',
                    },
                    lineStyle: {
                      color: '#7186dc',
                    },
                  },
                ],
              });
            }
          } else {
            // 如果返回的 X 轴数据长度不大于 0，清空 xdata 和 ydata，并重置图表选项
            xdata.value = [];
            ydata.value = [];
            setOptions({});
          }
        });
      }
    };

    const value2 = ref(null); // 用于绑定日期选择器的值 


    const handleDateChange2 = (date, dateString) => {
      value2.value = dateString.replace(/-/g, ''); // 更新绑定的值（通常这一步由 v-model 自动处理）  
      if (!satName.value) {
        message.error('请先选择卫星')
      } else {
        get_spec({ date: value2.value, sat: satName.value }).then((res) => {
          if (res.data.data.result.data.data.x.length > 0) {
            xdata2.value = res.data.data.result.data.data.x
            ydata2.value = res.data.data.result.data.data.y
            setOptions2({
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    width: 1,
                    color: '#019680',
                  },
                },
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xdata2.value,
                axisLabel: {
                  interval: 380,
                  //rotate: 315,
                },
              },
              yAxis: [
                {
                  type: 'value',
                  max: -30,
                  min: -130
                },
              ],
              grid: { left: '1%', right: '1%', top: '2  %', bottom: 60, containLabel: true },
              dataZoom: [
                {
                  show: true,
                  realtime: true,
                  backgroundColor: "rgba(47,69,84,0)",
                  start: 0,
                  end: 100,
                  xAxisIndex: [0, 1]
                },
                {
                  type: 'inside',
                  realtime: true,
                  start: 0,
                  end: 100,
                  xAxisIndex: [0, 1]
                }
              ],
              series: [
                {
                  smooth: true,
                  data: ydata2.value,
                  type: 'line',
                  itemStyle: {
                    color: '#5C90F9',
                  },
                },
              ],
            });
            if (xdata.value.length > 0) {
              setOptions3({
                // Make gradient line here
                visualMap: [
                  {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 400,
                  },
                  {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 1,
                    dimension: 0,
                    min: 0,
                    max: dateList.length - 1,
                  },
                ],
                title: [],
                tooltip: {
                  trigger: 'axis',

                },
                dataZoom: [
                  {
                    startValue: '1820000',
                  },
                  {
                    type: 'inside',
                  },
                ],
                legend: {
                  data: ['系列1', '系列2'],
                  textStyle: {
                    color: '#fff'
                  },
                  icon: "roundRect"
                },
                xAxis: [
                  {
                    // 传数据
                    data: xdata2,
                    axisLabel: {
                      // interval:0
                    }
                  },
                ],
                yAxis: [{}],
                grid: {
                  left: '5%',
                  right: '2%',
                  bottom: '20%',
                },
                series: [
                  {
                    name: '系列1',
                    type: 'line',
                    showSymbol: false,
                    // 传数据
                    data: ydata,
                    itemStyle: {
                      color: 'red',  // 修改折线颜色为红色
                    },
                    lineStyle: {
                      color: 'red',  // 修改折线颜色为红色
                    },
                  },
                  {
                    name: '系列2',
                    type: 'line',
                    showSymbol: false,
                    // 传数据
                    data: ydata2,
                    itemStyle: {
                      color: '#7186dc',  // 修改折线颜色为红色
                    },
                    lineStyle: {
                      color: '#7186dc',  // 修改折线颜色为红色
                    },
                  },
                ],
              });
            }
          } else {
            xdata2.value = []
            ydata2.value = []
            setOptions2({})
          }
        })
      }
    };

    return {
      chartRef,
      chartRef2,
      chartRef3,
      value1,
      value2,
      handleDateChange,
      handleDateChange2,
      get_satName,
      typeoption,
      changeck,
      satName,
      highlightedDates,
      getCurrentStyle
    };
  },
});
  </script>
  
  <style lang="less" scoped>
::v-deep .ant-calendar-picker-input {
    color: #fff !important;
  }
  
  ::v-deep .ant-select-selection-item {
    color: #fff;
  }
  
  ::v-deep .ant-calendar-picker-icon {
    color: #fff;
  }
  
  .custom-container {
    //background: #fff !important;
  }
  
  .spane1 {
    color: #0960bd;
    cursor: pointer;
  }
  
  .list1 {
    padding: 20px 0;
  }
  
  .content1 {
    padding: 15px 0;
    text-indent: 24px;
  }
  
  .hh1 {
    line-height: 34px;
    text-align: center;
    font-weight: bold;
  }
  
  .dd1 {
    line-height: 34px;
  }
  
  .dd2 {
    line-height: 34px;
    text-indent: 24px;
  }
  
  .dd3 {
    line-height: 34px;
    text-indent: 24px;
    float: right;
    margin: 20px 0;
  }
  
  .coll1 {
    margin-bottom: 50px;
  }
  
  .menu_list {
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    flex-wrap: wrap;
  }
  
  .menu_list_item {
    margin: 0;
    width: 200px;
    height: 80px;
    padding: 5px 0;
    //border-radius: 10px;
    text-align: center;
    //border: 5px solid #87e8de;
    color: #08979c;
    background-image: linear-gradient(#4b4b4b, #323232);
    margin-right: 15px;
    position: relative;
    margin-top: 10px;
  }
  
  /*
                                                                                                                    .menu_list_item{
                                                                                                                      margin: 0 20px;
                                                                                                                      width: 120px;
                                                                                                                      height: 120px;
                                                                                                                      padding: 30px 0;
                                                                                                                      border-radius: 100%;
                                                                                                                      text-align: center;
                                                                                                                      border: 5px solid #87e8de;
                                                                                                                      color: #08979c;
                                                                                                                      background: #e6fffb;
                                                                                                                    }*/
  .menu_list_item.iscked {
    color: #096dd9;
    //background: #e6f7ff;
    //border-color: #91d5ff;
    border: 1px solid #096dd9;
  }
  
  .menu_list_item.iscked .pa1 {
    color: #fff;
  }
  
  .box_tit {
    position: relative;
    // padding: 12px 16px;
    padding-left: 40px;
    color: #fff;
    line-height: 22px;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
    margin-bottom: -30px;
    z-index: 10;
    // border-radius: 0 0 2px 2px;
    // border: 1px solid #d9d9d9;
    // background: #222222;
  }
  
  .box_con {
    overflow: hidden;
    color: #fff;
    // background-color: #444;
    box-sizing: border-box;
    border-radius: 0 0 2px 2px;
    // border: 1px solid #d9d9d9;
    border-top: 0;
  }
  
  .font1 {
    position: relative;
    top: 2px;
  }
  
  .icon2 {
    padding-top: 10px;
    margin-left: 20px;
  }
  
  .pa1 {
    color: #fff;
    font-size: 16px;
    margin: 0;
    margin-top: 10px;
    line-height: 30px;
    font-weight: bold;
  }
  
  .pa2 {
    font-size: 12px;
    color: #93d2fb;
    margin: 0;
    line-height: 20px;
  }
  
  .pa3 {
    position: absolute;
    right: 10px;
    top: 0;
    color: red;
    font-weight: bold;
    cursor: pointer;
  }
  
  .notice1 {
    width: 100%;
    padding-top: 150px;
    text-align: center;
    color: #fff;
    font-size: 16px;
  }
  
  .spanf1 {
    color: #05e618;
  }
  
  .char1 {
    // background-image: linear-gradient(#535353, #060606);
  }
  
  .spanaa1 {
    margin-left: 25px;
  }
  
  .tablea1 {
    padding: 20px;
    padding-top: 0;
  }
  
  .buttona1 {
    position: absolute;
    z-index: 22;
    right: 10px;
    top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: rgb(82, 196, 26);
  }
  
  .boxe1 {
    margin-top: 30px;
  }
  
  .ant-input {
    color: #fff;
  }
  
  .anticon-close-circle {
    background: #fff;
  }
  
  .ant-select-clear {
    background: #3b3d3e;
    color: #fff;
  }
</style>
  <style>
.ant-spin-nested-loading {
    border: 1px solid #fff;
  }
  
  /* .moreset {
                                                                                                                  float: right;
                                                                                                                }
                                                                                                                
                                                                                                                .moreset span {
                                                                                                                  color: #93d2fb;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-select .ant-select-selection-item {
                                                                                                                  color: #fff;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-form-item-control-input-content {
                                                                                                                  color: #fff;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-progress-line {
                                                                                                                  width: 70%;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-modal-body {
                                                                                                                  background: #444;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-progress-text {
                                                                                                                  color: #fff;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-table-placeholder {
                                                                                                                  background: #444;
                                                                                                                  color: #fff;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-empty-normal {
                                                                                                                  color: #fff;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-table-body {
                                                                                                                  background: #fff;
                                                                                                                  color: #000;
                                                                                                                } */
  
  /* .ant-select:not(.ant-select-customize-input) .ant-select-selector {
                                                                                                                      background: pink !important;
                                                                                                                  } */
  /* .ant-select-selection-item {
                                                                                                                  color: #000 !important;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
                                                                                                                  color: #000 !important;
                                                                                                                }
                                                                                                                
                                                                                                                .a-select-arrow {
                                                                                                                  color: black !important;
                                                                                                                }
                                                                                                                
                                                                                                                .ant-select-arrow {
                                                                                                                  color: #ccc;
                                                                                                                } */
</style>
  